<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        新增的表单类型：
        限制用户：number/tel/email/url
        特殊的功能：range/color/secrch/file
        时间日期：data/data-time/time/week
     -->
     <form action="">
        <!-- 数字输入框 ：限制用户只能输入数字 提供上下两个箭头，加减-->
        <input type="number">
        <!-- 手机号 ：限制用户只能输入手机号 pc端无明显效果-->
        <input type="tel">
        <!-- email ：限制用户只能输入邮箱-->
        <input type="email">
        <!-- 文件选择：***** -->
        <input type="file">
        <input type="file" multiple>
        <!-- 滑动条 -->
        <input type="range" max="200" min="0">
        <!--颜色拾色器  -->
        <input type="color">
        <!-- 搜索框 :pc端可能会在右侧有一个x号，可以删除输入。手机端输入键盘右下角会显示搜索-->
        <input type="secrch">

        <!-- 日期 时间 日期时间 -->
        <input type="date"  class="ran">
        <input type="time">
        <input type="datetime-local">

        <!-- 提交按钮 -->
        <input type="submit">
     </form>
    <script>
        // 获取标签
        let ran = document.querySelector(".ran")
        // 添加点击事件
        ran.onchange = function(){
            console.log(this.value);
        }
    </script>
</body>
</html>